<template>
  <div class="result-container">
    <!-- 朴素贝叶斯模型卡片 -->
    <el-card class="analysis-card">
      <div slot="header" class="card-header">
        <span>朴素贝叶斯模型性能分析</span>
      </div>
      <div class="metrics-container">
        <div class="metric-item">
          <div class="metric-label">准确率 (Accuracy)</div>
          <div class="metric-value">{{ nbMetrics.accuracy }}</div>
        </div>
        <div class="metric-item">
          <div class="metric-label">精确率 (Precision)</div>
          <div class="metric-value">{{ nbMetrics.precision }}</div>
        </div>
        <div class="metric-item">
          <div class="metric-label">召回率 (Recall)</div>
          <div class="metric-value">{{ nbMetrics.recall }}</div>
        </div>
        <div class="metric-item">
          <div class="metric-label">F1 分数</div>
          <div class="metric-value">{{ nbMetrics.f1Score }}</div>
        </div>
      </div>
      <div class="confusion-matrix">
        <h4>混淆矩阵</h4>
        <div ref="nbHeatmap" style="width: 100%; height: 400px;"></div>
      </div>
    </el-card>

    <!-- CNN模型卡片 -->
    <el-card class="analysis-card">
      <div slot="header" class="card-header">
        <span>CNN模型性能分析</span>
      </div>
      <div class="metrics-container">
        <div class="metric-item">
          <div class="metric-label">准确率 (Accuracy)</div>
          <div class="metric-value">{{ cnnMetrics.accuracy }}</div>
        </div>
        <div class="metric-item">
          <div class="metric-label">精确率 (Precision)</div>
          <div class="metric-value">{{ cnnMetrics.precision }}</div>
        </div>
        <div class="metric-item">
          <div class="metric-label">召回率 (Recall)</div>
          <div class="metric-value">{{ cnnMetrics.recall }}</div>
        </div>
        <div class="metric-item">
          <div class="metric-label">F1 分数</div>
          <div class="metric-value">{{ cnnMetrics.f1Score }}</div>
        </div>
      </div>
      <div class="confusion-matrix">
        <h4>混淆矩阵</h4>
        <div ref="cnnHeatmap" style="width: 100%; height: 400px;"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'ResultList',
  data() {
    return {
      // 朴素贝叶斯模型指标
      nbMetrics: {
        accuracy: '0.9817',
        precision: '0.9751',
        recall: '0.9889',
        f1Score: '0.9819'
      },
      // CNN模型指标
      cnnMetrics: {
        accuracy: '0.9847',
        precision: '0.9733',
        recall: '0.9967',
        f1Score: '0.9849'
      },
      // 朴素贝叶斯混淆矩阵数据
      nbConfusionMatrix: [
        { type: '正常邮件', normal: 4093, spam: 107 },
        { type: '垃圾邮件', normal: 47, spam: 4182 }
      ],
      // CNN混淆矩阵数据
      cnnConfusionMatrix: [
        { type: '正常邮件', normal: 3374, spam: 0 },
        { type: '垃圾邮件', normal: 47, spam: 3370 }
      ]
    }
  },
  mounted() {
    this.initNBHeatmap()
    this.initCNNHeatmap()
  },
  methods: {
    initNBHeatmap() {
      const chart = echarts.init(this.$refs.nbHeatmap)
      const option = {
        title: {
          text: '朴素贝叶斯混淆矩阵热力图'
        },
        tooltip: {
          position: 'top'
        },
        grid: {
          top: '15%',
          bottom: '15%'
        },
        xAxis: {
          type: 'category',
          data: ['正常邮件', '垃圾邮件'],
          splitArea: {
            show: true
          }
        },
        yAxis: {
          type: 'category',
          data: ['正常邮件', '垃圾邮件'],
          splitArea: {
            show: true
          }
        },
        visualMap: {
          min: 0,
          max: 4500,
          calculable: true,
          orient: 'horizontal',
          left: 'center',
          bottom: '0%',
          inRange: {
            color: ['#f6f8fc', '#001c77']
          }
        },
        series: [{
          name: '混淆矩阵',
          type: 'heatmap',
          data: [
            [0, 0, 4093],
            [0, 1, 107],
            [1, 0, 47],
            [1, 1, 4182]
          ],
          label: {
            show: true
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      }
      chart.setOption(option)
    },
    initCNNHeatmap() {
      const chart = echarts.init(this.$refs.cnnHeatmap)
      const option = {
        title: {
          text: 'CNN混淆矩阵热力图'
        },
        tooltip: {
          position: 'top'
        },
        grid: {
          top: '15%',
          bottom: '15%'
        },
        xAxis: {
          type: 'category',
          data: ['正常邮件', '垃圾邮件'],
          splitArea: {
            show: true
          }
        },
        yAxis: {
          type: 'category',
          data: ['正常邮件', '垃圾邮件'],
          splitArea: {
            show: true
          }
        },
        visualMap: {
          min: 0,
          max: 3500,
          calculable: true,
          orient: 'horizontal',
          left: 'center',
          bottom: '0%',
          inRange: {
            color: ['#f6f8fc', '#001c77']
          }
        },
        series: [{
          name: '混淆矩阵',
          type: 'heatmap',
          data: [
            [0, 0, 3282],
            [0, 1, 92],
            [1, 0, 0],
            [1, 1, 3370]
          ],
          label: {
            show: true
          },
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      }
      chart.setOption(option)
    }
  }
}
</script>

<style scoped>
.result-container {
  padding: 20px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.analysis-card {
  flex: 1;
  min-width: 300px;
}

.card-header {
  font-size: 18px;
  font-weight: bold;
}

.metrics-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.metric-item {
  text-align: center;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.metric-label {
  font-size: 14px;
  color: #606266;
  margin-bottom: 8px;
}

.metric-value {
  font-size: 24px;
  color: #303133;
  font-weight: bold;
}

.confusion-matrix {
  margin-top: 20px;
}

.confusion-matrix h4 {
  margin-bottom: 15px;
  color: #303133;
}
</style>